<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>count:{{count}}</p>
        <p>计算属性: {{double}}</p>
        <button @click="count++">count++</button>
        <hr />
        <p>{{msg}}</p>
        <button @click='msg=456'>修改msg</button>
    </div>
</body>

</html>
<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 100,
                msg: '123'
            }
        },
        computed: {
            double() {
                return this.count * 2
            }
        },
        methods: {
            handclick() {

            }
        },
        beforeCreate() {
            // 组件实例还没有完全创建完毕, 因为该阶段 data中的数据和计算属性还没有创建,所以获取不到
            // data 中的数据,计算属性, methods 方法
            // 应用场景: 一般不用
            console.log('beforeCreate');
            // console.log(this);// 指向当前的组件实例也就是app
            // console.log(this.count); //undefined
            // console.log(this.double);//undefined
            // console.log(this.handclick);//undefined
        },
        created() {
            // 该生命周期, 组件实例创建完毕后触发. 此时数据计算属性方法都已经初始化完毕,可以获取和修改
            // 在该阶段 : 一般做为数据的请求使用  发起ajax 数据请求
            this.count = 500
            console.log('created');
            // console.log(this.count); //undefined
            // console.log(this.double);//undefined
            // console.log(this.handclick);//undefined
        },
        beforeMount() {
            // 组件挂载前触发,  该生命周期中,dom 树上的数据还是旧数据,此时已经产生了虚拟dom,
            // 使用场景不多
            console.log('beforeMount');
            // console.log(document.querySelector('p')); //null 
        },
        mounted() {
            // 组件挂载后触发, 该生命周期中,dom 已将更新到父节点上, 
            console.log('mounted');
            // console.log(document.querySelector('p')); // <p>count:500</p>
        },
        beforeUpdate() {
            // 当数据改变后, 然后dom 更新前执行, 监听data中的所有的数据的变化, 只要变化,就触发该函数
            console.log('beforeUpdate');
            // console.log(this.count);
            console.log(document.querySelector('p').innerHTML);
        },
        updated() {
            // 更新后的生命周期, 数据更新后,同时最新的dom已经更新完毕了.
            console.log('updated');
            console.log(document.querySelector('p').innerHTML);
            // 一般使用watch 代替该生命周期的执行,;减少没必要的代码执行.
        },
        beforeUnmount() {
            // 表示该生命周期阶段组件卸载前,
            //特点: dom 即将从页面 的节点中卸载,此时该组件实例上的数据, 计算属性,mthods , 监听器还能访问
            // 使用场景: 一般用于清除副作用
            // 举例: 清除事件的绑定, 清除一些定时器, 取消数据的请求
        },
        unmounted() {
            // 表示该生命周期阶段: 组件已经卸载完毕,此时页面中已经没有该组件了. 
            // 特点:该组件的素有的响应式的数据,方法, 计算属性,监听器,都已经没有了
            // 使用场景: 一般用于清除副作用
            // 举例: 清除事件的绑定, 清除一些定时器, 取消数据的请求
        }




    }).mount('#app')

</script>